<template>
	<view>
		<van-row>
			<van-col span="24">
				<van-search :value="goodsValue" 
						    placeholder="搜索单品" 
							@change="inputChange"
							@blur="inputBlur"></van-search>
			</van-col>
		</van-row>
		<view class="box" v-if="isShow">
			<!-- 热门搜索 -->
			<view class="hot"> 
				<view>
					<text class="txt-bb">热门搜索</text>
				</view>
				<view class="hot-box clearfix">
					<block v-for="(item, index) in hotList" :key="index">
						<view class="txt-box left" @click="itemBox(item)">{{item}}</view>
					</block>
				</view>
			</view>
			<!-- 历史搜索 -->
			<view class="history" v-if="historyList.length !== 0">
				<view class="clearfix">
					<text class="left txt-bb">历史搜索</text>
					<image class="right img12" src="~@/static/category/remove.png" @click="deBtn"></image>
				</view>
				<view>
					<block v-for="(item, index) in historyList" :key="index">
						<view class="txt-box left" @click="itemBox(item)">{{item}}</view>
					</block>
				</view>
			</view>
		</view>
		<view v-else>
			<block v-for="(item, index) in searchList" :key="index">
				<view class="search-list">
					<text>{{item}}</text>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				arr: [],
				isShow: true,
				searchList: [],
				goodsValue: '',
				historyList: JSON.parse(uni.getStorageSync('history') || "[]") ,
				hotList: ['汽车人', '范德萨', '范德萨发的', '比较好', '发电部有多高', '方便的', '发动机']
			};
		},
		methods: {
			itemBox(content) {
				this.goodsValue = content;
				if(this.historyList.indexOf(content) == -1) {
					this.historyList.push(content)
					uni.setStorageSync('history', JSON.stringify(this.historyList))
				}
			},
			//搜索框失去焦点
			inputBlur(e) {
				this.isShow = true
				this.goodsValue = e.detail.value
				if(this.goodsValue === '') return;
				if(this.historyList.indexOf(this.goodsValue) == -1) {
					this.historyList.push(this.goodsValue)
					uni.setStorageSync('history', JSON.stringify(this.historyList))
				}
			},
			deBtn() {
				uni.removeStorageSync('history');
				this.historyList = []
			},
			inputChange(e) {
				this.isShow = false
				let values = e.detail
				for(let i = 0; i < this.arr.length; i++) {
					if(this.arr[i].includes(values)) {
						this.searchList.push(this.arr[i])
					}
				}
				
			}
		},
		onShow() {
			let that = this
			uniCloud.callFunction({
				name: 'allGoods',
				data: {
					type: "getBarList"
				}	
			}).then(res => {
				let result = res.result.data.data
				for(let i = 0; i < result.length; i++) {
					that.arr.push(result[i].cateType)
				}
			})
			
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		width: $uni-width;
		padding: 40rpx 40rpx;
		box-sizing: border-box;
		.txt-box {
			background-color: #f5f5f9;
			padding: 10rpx 20rpx;
			height: 40rpx;
			line-height: 40rpx;
			text-align: center;
			margin:20rpx 20rpx 0 0;
			font-size: $uni-font-size-sm;
		}
		.history {
			margin-top: 40rpx;
			.img12 {
				height: 40rpx;
				width: 40rpx;
			}
		}
		.txt-bb {
			font-size: $uni-font-size-base;
			font-weight: 700;
		}
	}
	.search-list {
		width: $uni-width;
		padding-left: 40rpx;
		box-sizing: border-box;
		height: 60rpx;
		line-height: 60rpx;
		border-bottom: 2rpx solid #ddd;
	}

</style>
